<template>
  <div class="product-box">
    <heading-title :title="title" />
    <el-divider />
    <!-- 功能栏 -->
    <div class="handle-box">
      <div>
        <el-dropdown @command="handleCommand" trigger="click">
          <span class="el-dropdown-link">
            {{ menuName }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="Positon">Positon</el-dropdown-item>
            <el-dropdown-item command="ProductName"
              >ProductName</el-dropdown-item
            >
            <el-dropdown-item command="Price">Price</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div @click="drawer = true">
        Filters
        <i class="el-icon-s-operation"></i>
      </div>
    </div>
    <!-- list -->
    <div style="overflow: hidden">
      <el-row :gutter="6">
        <el-col
          :sm="8"
          :xs="12"
          :lg="6"
          v-for="(item, index) in arrivalsList"
          :key="index"
        >
          <product-item :obj="item" collection />
        </el-col>
      </el-row>
    </div>
    <!-- pagination -->
    <div class="pagination-box">
      <el-pagination layout="prev, pager, next" :total="arrivalsList.length">
      </el-pagination>
    </div>
    <!-- modal -->
    <el-drawer :visible.sync="drawer" size="320px" :with-header="false">
      <div class="handle-box-modal">
        <el-collapse>
          <el-collapse-item title="Category" name="1">
            <div>Navy blue (1 item)</div>
          </el-collapse-item>
          <el-collapse-item title="Price" name="2">
            <el-slider v-model="value" range :min="50" :max="1900"> </el-slider>
            <p>{{ "$" + value[0] + ".00 - $" + value[1] + ".00" }}</p>
          </el-collapse-item>
          <el-collapse-item title="Brand" name="3">
            <el-checkbox v-model="checked1">Balenciaga (61 items)</el-checkbox>
            <el-checkbox v-model="checked2">Birkenstock (1 item)</el-checkbox>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// import { productRender, products } from "@/api/user.js";
import { products, productsSku } from "@/api/rest_api";
export default {
  data() {
    return {
      title: "",
      id: 0,
      menuName: "Positon",
      drawer: false,
      value: [50, 1900],
      checked1: false,
      checked2: false,
      arrivalsList: []
    };
  },

  components: {
    ProductItem: () => import("_c/ProductItem"),
    HeadingTitle: () => import("_c/HeadingTitle")
  },

  mounted() {
    this.getTitle();
  },

  methods: {
    getPath() {
      this.getTitle();
    },
    async getTitle() {
      this.title = this.$route.query.title;
      this.id = this.$route.query.id || null;
      let params = {
				// storeId: 1,
        $sort: {
          category_id: "desc"
        },
        $perPage: 200,
        $page: 1
      };
			if (this.id) {
				params.category_id = this.id
			} else {
				params.brands = this.title
			}
      // let params = {
      //   "searchCriteria[filterGroups][0][filters][0][field]": "brands",
      //   "searchCriteria[filterGroups][0][filters][0][value]": this.title,
      //   "searchCriteria[filterGroups][0][filters][0][conditionType]": "eq", //模糊查询
      //   "searchCriteria[sortOrders][0][field]": "created_at", //按照创建时间排序
      //   "searchCriteria[sortOrders][0][direction]": "desc",
      //   "searchCriteria[pageSize]": 100,
      //   "searchCriteria[currentPage]": 1,
      //   "storeId": 1,
      //   "currencyCode": "rmb"
      // };
			let {error, res} = await products(params);
			if (error) return;
        this.arrivalsList = [];
        let arry = res.items || [];
        for (let i in arry) {
          let obj = Object.assign(arry[i], {
            src: 'http://47.119.123.183/pub/media/catalog/product' + arry[i].media_gallery_entries[0].file,
            content: arry[i].name,
          });
          this.arrivalsList.push(obj);
        }
    },
    handleCommand(command) {
      if (this.menuName === command) return;
      this.menuName = command;
    },
		// 获取媒体信息
		async getProductMedia(sku) {
			let {error, res} = await productsSku(sku);
			if (error) return {data: null};
			console.log(res);
			return {data: res};
		}
  },

  watch: {
    $route: "getPath"
  }
};
</script>
<style lang="scss" scoped>
.product-box {
  .el-dropdown-link {
    cursor: pointer;
    color: #1a1a1a;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #1a1a1a;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .handle-box {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
    height: 50px;

    & > div {
      &:last-child {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
  .handle-box-modal {
    padding: 0 20px;
  }
  .pagination-box {
    margin: 20px 0;
    text-align: center;
  }
}
</style>
